<template>
  <div class="body">
    <h1>首页</h1>
    <button v-for="(item, index) in title" :key="index" @click="toggle(index)">
      {{ item }}
    </button>
    <div class="goods_list">
      <ul>
        <li v-for="item in data" :key="item.id">
          <div>
            <img :src="item.img" />
            <p>{{ item.goods }}</p>
            <span>{{ item.price | money }}</span>
            <i class="el-icon-circle-plus" @click="add(item)"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="goods_car" v-show="car_list.length">
      <h4>购物车</h4>
      <button @click="is = true">删除</button>
      <ul>
        <li v-for="(item, index) in car_list" :key="item.id">
          <div>
            <input
              type="checkbox"
              :checked="item.is"
              @click="check(item)"
            /><img :src="item.img" /><span>{{ item.goods }}</span
            ><span>{{ item.price | money }}</span>
            <button @click="jia(item, '-')">
              <i class="el-icon-minus"></i></button
            ><input
              class="number"
              type="text"
              :value="item.num"
              @blur="num(item, index)"
              ref="number"
            /><button @click="jia(item, '+')">
              <i class="el-icon-plus"></i>
            </button>
          </div>
        </li>
      </ul>
      <input type="checkbox" :checked="all_check" @click="all()" />已选{{
        total
      }}件
      <div>{{ rel }}</div>
      <button @click="pey()">去结算</button>
    </div>
    <div v-show="is" class="del_box">
      <div>确认删除所选商品？</div>
      <button @click="is = false">取消</button
      ><button @click="del()">删除</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ["热门推荐", "新品推荐", "清凉一夏", "呵护肠胃"],
      data: [],
      car_list: [],
      all_check: true,
      is: false,
      all_data: [
        {
          pid: 0,
          id: 0,
          goods: "京都念慈庵",
          img: "",
          price: 28.3,
        },
        {
          pid: 0,
          id: 1,
          goods: "感冒灵颗粒",
          img: "",
          price: 28.3,
        },
        {
          pid: 0,
          id: 2,
          goods: "盏如初燕窝粥",
          img: "",
          price: 28.3,
        },
        {
          pid: 0,
          id: 3,
          goods: "莲花清瘟胶囊",
          img: "",
          price: 28.3,
        },
        {
          pid: 1,
          id: 4,
          goods: "汤臣倍健蛋白粉",
          img: "",
          price: 28.3,
        },
        {
          pid: 1,
          id: 5,
          goods: "维诺健蛋白粉",
          img: "",
          price: 28.3,
        },
        {
          pid: 1,
          id: 6,
          goods: "维诺健加勉钙锌维生素",
          img: "",
          price: 28.3,
        },
        {
          pid: 1,
          id: 7,
          goods: "汤臣倍健健力多疏骨片",
          img: "",
          price: 28.3,
        },
        {
          pid: 2,
          id: 8,
          goods: "太极集团藿香正气口服液",
          img: "",
          price: 28.3,
        },
        {
          pid: 2,
          id: 9,
          goods: "药圣堂藿香正气水",
          img: "",
          price: 28.3,
        },
        {
          pid: 2,
          id: 10,
          goods: "上海中华风油精",
          img: "",
          price: 28.3,
        },
        {
          pid: 2,
          id: 11,
          goods: "天马山风油精",
          img: "",
          price: 28.3,
        },
        {
          pid: 3,
          id: 12,
          goods: "汤臣倍健益生菌粉",
          img: "",
          price: 28.3,
        },
        {
          pid: 3,
          id: 13,
          goods: "健胃消食片",
          img: "",
          price: 28.3,
        },
        {
          pid: 3,
          id: 14,
          goods: "维诺健益生菌粉",
          img: "",
          price: 28.3,
        },
        {
          pid: 3,
          id: 15,
          goods: "荜铃胃痛颗粒",
          img: "",
          price: 28.3,
        },
      ],
    };
  },
  mounted() {
    this.data = this.all_data.filter((item) => item.pid == 0);
  },
  methods: {
    toggle(i) {
      this.data = this.all_data.filter((item) => item.pid == i);
    },
    add(item) {
      this.car_list.push({
        id: item.id,
        goods: item.goods,
        img: item.img,
        price: item.price,
        num: 1,
        is: true,
      });
    },
    jia(item, jian) {
      if (jian == "-" && item.num > 1) {
        item.num--;
      } else if (jian == "+") {
        item.num++;
      }
    },
    num(item, i) {
      item.num = Number(this.$refs.number[i].value);
    },
    check(item) {
      item.is = !item.is;
      this.total;
      this.all_check = this.car_list.every((item) => item.is == true);
    },
    all() {
      this.all_check = !this.all_check;
      this.car_list.forEach((item) => {
        item.is = this.all_check;
      });
    },
    pey() {
      var arr = this.car_list.filter((item) => item.is == true);
      if (arr.length != 0) {
        localStorage.setItem("arr", JSON.stringify(arr));
        this.$router.push("/about");
      } else {
        alert("请选择商品");
      }
    },
    del() {
      this.car_list = this.car_list.filter((item) => item.is == false);
      this.is = false;
    },
  },
  filters: {
    money(a) {
      return "￥" + a;
    },
  },
  computed: {
    rel() {
      var num = 0;
      this.car_list.forEach((item) => {
        if (item.is) {
          num += item.price * item.num;
        }
      });
      return "￥" + num;
    },
    total() {
      // num = 0;
      var num = this.car_list.filter((item) => item.is == true).length;
      return num;
    },
  },
};
</script>
<style lang='less' scoped>
* {
  list-style: none;
}
.body{
  max-width: 380px;
  background-color: #fff;
  padding: 10px;
}
.number {
  width: 20px;
}
.del_box {
  background-color: aliceblue;
  position: fixed;
  bottom: 100px;
  left: 100px;
}
.goods_list{
background-color: antiquewhite ;
ul{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li{
    width: 155px;
    background-color: aquamarine;
    margin:5px;
  }
}
}
</style>
